<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <script src="./2.js"></script> -->

    <script>
      window.onload = function () {
        var formateTime = function (dates) {
          //  如果不传递参数 就用当前时间
          if (!dates) dates = new Date()
          //  如果传递进来的是一个字符串那么就转换成时间时间格式
          if (typeof dates === 'string') {
            dates = new Date(dates)
          }
          var h = dates.getHours()
          var m = dates.getMinutes()
          var s = dates.getSeconds()
          h = h >= 10 ? h : '0' + h
          m = m >= 10 ? m : '0' + m
          s = s >= 10 ? s : '0' + s
          return ''.concat(h, ':').concat(m, ':').concat(s)
        }

        var KEY = 'ts-demo-data'
        var List = JSON.parse(localStorage.getItem(KEY))

        var lastCount = 0

        function updateData() {
          // 1 获取之前的 缓存数据
          //  2 追加一条数据
          // 3 存储最新的数据
          var res = getData()

          if (res.length) {
            lastCount = res[res.length - 1].count + 1
          } else {
            lastCount = 1
          }
          List.push({
            count: lastCount,
            time: formateTime(),
          })
          console.log(List)
          localStorage.setItem(KEY, JSON.stringify(List))
        }
        function getData() {
          // 获取缓存的数据  并且转变为数据格式的json 数据
          var getLocal = localStorage.getItem(KEY)
          var res = JSON.parse(getLocal || '[]')
          return res
        }
        // 1 每一次render 被调用的时候 更新数据
        // 2  每一次render 被调用的时候 获取更新后的数据 进行页面渲染
        function render() {
          updateData()
          var data = getData()
          var divDoms = document.getElementById('divBox')
          divDoms.innerHTML = data
            .map(function (item) {
              return '  \u6B21\u6570 \uFF1A'
                .concat(item.count, '   ----   \u65F6\u95F4:   ')
                .concat(item.time)
            })
            .join('<br/>')
        }
        render()
      }
    </script>
  </head>
  <body>
    <div id="divBox"></div>
  </body>
</html>
